<!-- 逻辑代码块-->
<script setup lang="ts">
// 普通数据
const title = '普通数据'
// 带有html标签的数据
const htmlTitle = '<button>标签数据</button>'
</script>

<!-- 结构块:-->
<template>
  <!-- 使用内容渲染指令来渲染内容 -->
  <!-- v-text -->
  <div>
    <!-- 渲染普通数据时，二者并无区别 -->
    <p v-text="title"></p>
    <p v-html="title"></p>

    <!-- 渲染带有html标签的数据时，v-html指令会解析html标签 -->
    <p v-text="htmlTitle"></p>
    <p v-html="htmlTitle"></p>

    <!-- 使用内容渲染指令的标签内部不能再包含内容 -->
  </div>
</template>

<!-- 样式块-->
<style scoped></style>
